import React, { Component, PureComponent } from 'react'

// export default class index extends Component {
//   state = {carname: "初始值"}
//   active = () => {
//     // 我只是用了下state，我的render就被调用了 ，不科学
//     // this.setState({});

//     // 我只是修改了下state，我的子组件就被调用了 ，不科学
//     this.setState({carname: "xiugai"})
//   }
//   render() {
//     console.log("父组件的render调用了");
//     return (
//       <div>
//         <div>{this.state.carname}</div>
//         <button onClick={this.active}>点击一下吧</button>
//         {/* 不传props的时候，修改state会导致A被调用 */}
//         <A/>  
//       </div>
//     )
//   }
// }

export default class index extends PureComponent {
  state = {carname: "初始值"}
  active = () => {
    // 我只是用了下state，我的render不会被调用了 
    // this.setState({});

    // 我只是修改了下state，我的子组件不会被调用了 
    // this.setState({carname: "xiugai"})

    // 假如这样修改就会出问题
     const obj = this.state;
     obj.carname = "dddd";
     this.setState(obj); //这样改的话，PureComponent只会拿地址，不会去管里面的值的更改，会出问题
  }
  render() {
    console.log("父组件的render调用了");
    return (
      <div>
        <div>{this.state.carname}</div>
        <button onClick={this.active}>点击一下吧</button>
        {/* 不传props的时候，修改state就不会导致A被调用 */}
        {/* <A/>   */}

        {/* 传props的时候，修改state被依赖的值才会导致A被调用 */}
        <A carname={this.state.carname}/>  

      </div>
    )
  }
}

class A extends PureComponent {
  render() {
    console.log("子组件的render调用了");
    return (
      <div>
        AAAAAAAA
      </div>
    )
  }
}
